<template>
    <div>
        <!-- 营销调度 -->
        <!-- 左侧导航栏 -->
        <el-row>
            <el-col :span="4" class="left-nav">
                <el-menu
                    :default-active="dfActive"
                    class="el-menu-vertical-demo">
                    <el-submenu index="1">
                        <template slot="title">
                        <img src="../../assets/imgs/bar_icon_banci_default.png" alt="">&nbsp;
                        <span>班次调度</span>
                        </template>
                        <el-menu-item-group>
                        <el-menu-item index="1-1" @click="jumpTo(1)">报班</el-menu-item>
                        <el-menu-item index="1-2" @click="jumpTo(2)">班次日计划</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title">
                        <img src="../../assets/imgs/bar_icon_dingyi_default.png" alt="">&nbsp;
                        <span>定义</span>
                        </template>
                        <el-menu-item-group>
                        <el-menu-item index="2-1" @click="jumpTo(3)">班次设置</el-menu-item>
                        <el-menu-item index="2-2" @click="jumpTo(4)">排班计划</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title">
                        <img src="../../assets/imgs/bar_icon_chepiao_default.png" alt="">&nbsp;
                        <span>票价管理</span>
                        </template>
                        <el-menu-item-group>
                        <el-menu-item index="3-1" @click="jumpTo(5)">硬调票价</el-menu-item>
                        <el-menu-item index="3-2" @click="jumpTo(6)">公式票价</el-menu-item>
                        <el-menu-item index="3-3" @click="jumpTo(7)">自定义公式</el-menu-item>
                        <el-menu-item index="3-4" @click="jumpTo(8)">票价调整记录</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="4">
                        <template slot="title">
                        <img src="../../assets/imgs/bar_icon_danan_default.png" alt="">&nbsp;
                        <span>运营档案</span>
                        </template>
                        <el-menu-item-group>
                        <el-menu-item index="4-1" @click="jumpTo(9)">营运单位</el-menu-item>
                        <el-menu-item index="4-2" @click="jumpTo(10)">车辆档案</el-menu-item>
                        <el-menu-item index="4-3" @click="jumpTo(11)">驾驶员档案</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="5">
                        <template slot="title">
                        <img src="../../assets/imgs/bar_icon_ziliao_default.png" alt="">&nbsp;
                        <span>基础资料</span>
                        </template>
                        <el-menu-item-group>
                        <el-menu-item index="5-1" @click="jumpTo(12)">行政区域</el-menu-item>
                        <el-menu-item index="5-2" @click="jumpTo(13)">线路管理</el-menu-item>
                        <el-menu-item index="5-3" @click="jumpTo(14)">站点管理</el-menu-item>
                        <el-menu-item index="5-4" @click="jumpTo(15)">车辆座位布局</el-menu-item>
                        <el-menu-item index="5-5" @click="jumpTo(16)">客车车型管理</el-menu-item>
                        <el-menu-item index="5-6" @click="jumpTo(17)">车票类型管理</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-col>
            <!-- 路由 -->
            <el-col :span="20" class="router-container">
                <router-view @sendActive="getActive"></router-view>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data: function(){
        return {
            dfActive:"1-1"
        }
    },
    methods:{
        jumpTo(i){
            switch(i){
                case 1:this.$router.push("/index/service/baoBan");break;
                case 2:this.$router.push("/index/service/banCiPlan");break;
                case 3:this.$router.push("/index/service/banCiSetting");break;
                case 4:this.$router.push("/index/service/paiBanPlan");break;
                case 5:this.$router.push("/index/service/priceChange");break;
                case 6:this.$router.push("/index/service/priceChange");break;
                case 7:this.$router.push("/index/service/custom");break;
                case 8:this.$router.push("/index/service/changeList");break;
                case 9:this.$router.push("/index/service/unit");break;
                case 10:this.$router.push("/index/service/carList");break;
                case 11:this.$router.push("/index/service/driverList");break;
                case 12:this.$router.push("/index/service/xzPlace");break;
                case 13:this.$router.push("/index/service/roadManage");break;
                case 14:this.$router.push("/index/service/zdManage");break;
                case 15:this.$router.push("/index/service/seatLayout");break;
                case 16:this.$router.push("/index/service/keche");break;
                case 17:this.$router.push("/index/service/ticketManage");break;
            }
        },
        getActive(val){
            this.dfActive=val;
            console.log(this.dfActive)
        }
    },
    computed:{},
    watch:{},
    mounted() {
        this.$emit("sendTag",2);
    }
}   
</script>
<style scoped>
.left-nav{
    border:1px solid #EDEEF0;
}
</style>

<style>
.el-menu-item.is-active{
    color:#5C616E !important;
    background:#F8F8F8 !important;
    border-right:5px solid #009688;
    box-sizing:border-box !important;
}
.el-submenu__title span{
    font-weight:bold !important;
    font-size:17px !important;
}
.el-submenu .el-menu-item{
    min-width:0px !important;
}
</style>
